import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import autoprefixer from 'autoprefixer'
import postcssPixelToRemPlugin from 'postcss-pxtorem'
import compression from 'vite-plugin-compression'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import postcsspxtoviewport from 'postcss-px-to-viewport'
import { VantResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'
export default defineConfig({
    server: {
        port: 3000, // 设置开发服务器端口为 3000
        open: true, // 在开发服务器启动时自动在浏览器中打开应用
        host: '0.0.0.0', // 监听所有地址，包括局域网和公网地址
        strictPort: false, // 如果端口已被占用，直接退出
        https: false, // 是否启用 https
        cors: true, // 为开发服务器配置 CORS
        proxy: {}, // 配置自定义代理规则
        hmr: {
            overlay: true // 禁用或配置 HMR 连接的错误遮罩层
        }
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src')
        }
    },
    plugins: [
        vue(),
        AutoImport({
            resolvers: [VantResolver()]
        }),
        Components({
            resolvers: [VantResolver()]
        }),
        compression({
            algorithm: 'gzip', // 使用gzip压缩
            threshold: 10240, // 文件大小超过10KB时进行压缩
            deleteOriginFile: false // 是否删除原文件
        })
    ],
    css: {
        postcss: {
            plugins: [
                postcsspxtoviewport({
                    unitToConvert: 'px', // 要转化的单位
                    viewportWidth: 375, // UI设计稿的宽度
                    unitPrecision: 5, // 转换后的精度，即小数点位数
                    propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
                    viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
                    fontViewportUnit: 'vw', // 字体使用的视口单位
                    selectorBlackList: [], // 指定不转换为视窗单位的类名，
                    minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
                    mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false
                    replace: true, // 是否转换后直接更换属性值
                    exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
                    landscape: false // 是否处理横屏情况
                })
                // autoprefixer(),
                // postcssPixelToRemPlugin({
                //     rootValue: 16,
                //     propList: ['*'],
                //     selectorBlackList: ['ignore-'],
                //     replace: true,
                //     mediaQuery: false,
                //     minPixelValue: 0
                // })
            ]
        }
    }
})
